<template>
    <div class="container">
        <!--该页面包含一个简单的header、main和footer组件，以及服务和医生部分。
        页面使用了一个简单的白色背景和黑色文本颜色，以及一些简单的动画效果。
        该页面包含医院的服务和医生信息，以及一个预约按钮。-->
        <header class="header">
            <div class="logo">
                <img src="@/assets/logo.jpeg" alt="Hospital Logo">
                <h1>云医疗</h1>
            </div>
            <nav class="nav">
                <ul>
                    <!--<li><a href="#">Home</a></li>-->
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Doctors</a></li>
                    <!--<li><a href="#">Contact</a></li>-->
                </ul>
            </nav>
        </header>

        <main class="main">
            <h2>Welcome to our Hospital</h2>
            <p>云端医疗管理系统是一种高效、智能、安全的医疗信息化管理平台，可以帮助医疗机构提高服务质量和效率，为患者提供更好的医疗服务。<br/>
                Cloud medical management system is an efficient, intelligent and safe medical information management platform, which can help medical institutions improve service quality and efficiency and provide better medical services for patients.
            </p>

            <button class="btn">Book Appointment</button>
        </main>

        <section class="services">
            <h3>我们的服务</h3>
            <div class="service-cards">
                <div class="service-card">
                    <!--<img src="./assets/card1.png" alt="Service 1">-->
                    <h4>管理服务</h4>
                    <p>通过该系统可以对系统进行管理，对药品的进销存，收费详情，检查项目进行管理</p>
                </div>
                <div class="service-card">
                    <!--<img src="./assets/card2.png" alt="Service 2">-->
                    <h4>挂号就诊</h4>
                    <p>用户可以通过系统进行挂号或者就诊操作，管理人员也可以对医生的排班信息进行管理</p>
                </div>
                <div class="service-card">
                    <!--<img src="./assets/card3.png" alt="Service 3">-->
                    <h4>数据统计</h4>
                    <p>可以对收支金额、检查项目、药品销售进行统计</p>
                </div>
            </div>
        </section>

        <section class="doctors">
            <h3>我们的医生</h3>
            <div class="doctor-cards">
                <div class="doctor-card">
                    <!--<img src="./assets/doctor1.png" alt="Doctor 1">-->
                    <h4>扁鹊</h4>
                    <p>     扁鹊少时学医于长桑君，善于运用四诊：望闻问切，尤其是脉诊和望诊来诊断疾病，精于内、外、妇、儿、五官等科，名闻天下。</p>
                </div>
                <div class="doctor-card">
                    <!--<img src="./assets/doctor2.png" alt="Doctor 2">-->
                    <h4>李时珍</h4>
                    <p>自1565年起，其先后到武当山、庐山等地收集药物标本和处方，历经27年，于1590年完成了192万字的巨著《本草纲目》。此外他对脉学及奇经八脉也有研究，著述有《奇经八脉考》《濒湖脉学》等多种。</p>
                </div>
                <div class="doctor-card">
                    <!--<img src="./assets/doctor3.png" alt="Doctor 3">-->
                    <h4>华佗</h4>
                    <p>他精通内、外、妇、儿、针灸各科，对外科尤为擅长，发明了“麻沸散”来辅助外科手术，被后人称为“外科圣手”“外科鼻祖”。</p>
                </div>
            </div>
        </section>

        <footer class="footer">
            <p>&copy; 2021 云医疗. All Rights Reserved.</p>
        </footer>
    </div>
</template>

<script>


</script>

<style>
    .container {
        /*max-width: 1200px;*/
        margin: 0 auto;
        max-width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
        background: skyblue;
    }

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 0;
    }

    .logo img {
        height: 60px;
        margin-right: 10px;
        border-radius: 10px;
    }

    .logo h1 {
        font-size: 2rem;
        font-weight: bold;
        margin-left: -10px;
        font-family: 方正细圆简体;
    }

    .nav ul {
        display: flex;
        list-style: none;
    }

    .nav li {
        margin-right: 20px;
    }

    .nav a {
        text-decoration: none;
        color: #333;
        transition: color 0.3s ease;
    }

    .nav a:hover {
        color: #fff;
    }

    .main {
        padding: 50px 0;
        text-align: center;
    }

    .main h2 {
        font-size: 3rem;
        margin-bottom: 20px;
    }

    .main p {
        font-size: 1.2rem;
        line-height: 1.5;
        margin-bottom: 40px;
    }

    .btn {
        padding: 10px 20px;
        border: none;
        background-color: #333;
        color: #fff;
        font-size: 1.2rem;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .btn:hover {
        /*background-color: #666;*/
        background-color: skyblue;
    }

    .services {
        padding: 50px 0;
        text-align: center;
    }

    .services h3 {
        font-size: 2rem;
        margin-bottom: 40px;
        font-family: 方正细圆简体;
    }

    .service-cards {
        display: flex;
        justify-content: space-between;
    }

    .service-card {
        width: 30%;
        padding: 20px;
        background-color: #f5f5f5;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        text-align: center;
    }

    .service-card img {
        height: 100px;
        margin-bottom: 20px;
    }

    .service-card h4 {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }

    .service-card p {
        font-size: 1rem;
        line-height: 1.5;
    }

    .doctors {
        padding: 50px 0;
        text-align: center;
    }

    .doctors h3 {
        font-size: 2rem;
        margin-bottom: 40px;
        font-family: 方正细圆简体;
    }

    .doctor-cards {
        display: flex;
        justify-content: space-between;
    }

    .doctor-card {
        width: 30%;
        padding: 20px;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        text-align: center;
    }

    .doctor-card img {
        height: 100px;
        margin-bottom: 20px;
        border-radius: 50%;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }

    .doctor-card h4 {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }

    .doctor-card p {
        font-size: 1rem;
        line-height: 1.5;
    }

    .footer {
        text-align: center;
        padding: 20px 0;
    }

    .footer p {
        font-size: 1.2rem;
        color: #666;
    }
</style>
